<template>
  <div class="table">
    <el-tabs type="border-card" v-model="isProvince" @tab-click="tabClick">
      <el-tab-pane name="0">
        <span slot="label">
          <i class="el-icon-date tabel-icon"></i>省内登记表
        </span>
        <!-- 表格开始 -->
        <div>
          <el-row class="select-province">
            <el-col :span="1.5">
              <span class="select-text">请选择年份</span>
            </el-col>
            <el-col :span="4.3">
              <el-date-picker
                size="small"
                v-model="year"
                format="yyyy 年"
                value-format="yyyy"
                type="year"
                placeholder="选择年"
              ></el-date-picker>
            </el-col>
            <el-col :span="1.5" class="textSheng">
              <span class="select-text">请选择省份</span>
            </el-col>
            <el-col :span="4.3">
              <el-select
                size="small"
                v-model="province"
                clearable
                placeholder="请选择省份/直辖市"
              >
                <el-option
                  v-for="(item,index) in proviceOption"
                  :label="item"
                  :value="item"
                  :key="index"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="4.3">
              <el-button type="primary" size="small" @click="search">查询</el-button>
            </el-col>
            <el-button
              class="yearBtn"
              type="success"
              size="small"
              icon="el-icon-download"
              @click="outexcelbtn"
            >导出EXcel</el-button>
          </el-row>
          <h1 class="table-title">{{Tyear}}年{{Tprovince}}登记表</h1>
          <el-table
            :data="tableData1"
            class="table-content"
            :fit="true"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center','color':'#666'}"
            max-height="600px"
          >
            <el-table-column label="截止日期" fixed>
              <el-table-column prop="city" label="申请类型" width="100"></el-table-column>
            </el-table-column>
            <el-table-column label="1月" align="center">
              <el-table-column prop="month11" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month12" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="2月">
              <el-table-column prop="month21" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month22" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="3月">
              <el-table-column prop="month31" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month32" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="4月">
              <el-table-column prop="month41" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month42" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="5月">
              <el-table-column prop="month51" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month52" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="6月">
              <el-table-column prop="month61" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month62" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="7月">
              <el-table-column prop="month71" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month72" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="8月">
              <el-table-column prop="month81" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month82" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="9月">
              <el-table-column prop="month91" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month92" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="10月">
              <el-table-column prop="month101" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month102" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="11月">
              <el-table-column prop="month111" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month112" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="12月">
              <el-table-column prop="month121" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month122" label="后续" width="60"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane name="1">
        <span slot="label">
          <i class="el-icon-document-checked tabel-icon"></i>外省登记表
        </span>
        <!-- 外省表格开始 -->
        <div>
          <el-row class="select-province">
            <el-col :span="1.5">
              <span class="select-text">请选择年份</span>
            </el-col>
            <el-col :span="3">
              <el-date-picker
                size="small"
                v-model="year"
                format="yyyy 年"
                value-format="yyyy"
                type="year"
                placeholder="选择年"
              ></el-date-picker>
            </el-col>
            <el-col :span="2"></el-col>
            <el-button class="waiSearch" type="primary" size="small" @click="search">查询</el-button>
            <el-button
              class="yearBtn"
              style="float:right"
              type="success"
              icon="el-icon-download"
              size="small"
              @click="outexcelbtn"
            >导出EXcel</el-button>
          </el-row>
          <h1 class="table-title">{{Tyear}}年外省登记表</h1>
          <el-table
            :data="tableData2"
            class="table-content"
            :fit="true"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center','color':'#666'}"
            max-height="600px"
          >
            <el-table-column label="截止日期" fixed>
              <el-table-column prop="province" label="申请类型" width="100"></el-table-column>
            </el-table-column>
            <el-table-column label="1月" align="center">
              <el-table-column prop="month11" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month12" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="2月">
              <el-table-column prop="month21" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month22" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="3月">
              <el-table-column prop="month31" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month32" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="4月">
              <el-table-column prop="month41" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month42" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="5月">
              <el-table-column prop="month51" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month52" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="6月">
              <el-table-column prop="month61" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month62" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="7月">
              <el-table-column prop="month71" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month72" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="8月">
              <el-table-column prop="month81" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month82" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="9月">
              <el-table-column prop="month91" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month92" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="10月">
              <el-table-column prop="month101" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month102" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="11月">
              <el-table-column prop="month111" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month112" label="后续" width="60"></el-table-column>
            </el-table-column>
            <el-table-column label="12月">
              <el-table-column prop="month121" label="新申请" width="60"></el-table-column>
              <el-table-column prop="month122" label="后续" width="60"></el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>

      <!-- <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->
    </el-tabs>
  </div>
</template>
<script>
// import getExcel from "../../utils/outExcel/outExcel1";
import { Message, MessageBox } from "element-ui";
import { excelProvince } from "../../api/datastac";
import City from "@/assets/js/city";
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,

      proviceOption: [], // 省份列表

      isProvince: "0", // 默认省内
      province: "四川省", // 所选城市
      year: "", // 年份

      Tyear: "", // 标题年份
      Tprovince: "", // 标题年份

      tableData1: [],
      tableData2: [],
    };
  },
  computed: {
    bgdate() {
      return `${this.year}-01-01`;
    },
    eddate() {
      return `${this.year}-12-31`;
    },
  },
  methods: {
    // 选项卡切换
    tabClick() {
      this.getTabData();
    },
    //每页显示的条数
    handleSizeChange(val) {
      // 当前页码
      this.pageSize = val;
      // 重新渲染表格数据
      this.getTabData();
    },
    // 页数切换
    handleCurrentChange(val) {
      // 当前页码
      this.currentPage = val;
      // 重新渲染表格数据
      this.getTabData();
    },

    // 获得省份
    getCity() {
      City.forEach((item) => {
        this.proviceOption.push(item.label);
      });
    },

    // 标题
    changeTitle(year = this.year, province = this.province) {
      this.Tyear = year; // 标题年份
      this.Tprovince = province; // 标题年份
    },

    // 查询
    search() {
      if (!this.year || !this.province) {
        return this.$message.warning("请选择要查询的年份和城市");
      }
      this.getTabData();
      this.changeTitle();
    },

    // 导出Excel
    outexcelbtn() {
      let data = new FormData();
      console.log(
        Number(this.isProvince),
        this.isProvince == 0 ? this.province : "",
        this.bgdate,
        this.eddate
      );
      data.append("type", Number(this.isProvince)); // 省内报表0 省外报表1
      data.append("province", this.isProvince == 0 ? this.province : ""); // 省份
      data.append("bgdate", this.bgdate); // 年头
      data.append("eddate", this.eddate); // 年尾
      // console.log(data);

      MessageBox.confirm("此操作将导出Excel, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          excelProvince(data).then((res) => {
            //此处有个坑。这里用content保存文件流，最初是content=res，但下载的test.xls里的内容如下图1，
            //检查了下才发现，后端对文件流做了一层封装，所以将content指向res.data即可
            //另外，流的转储属于浅拷贝，所以此处的content转储仅仅是便于理解，并没有实际作用=_=
            const content = res.data;

            const blob = new Blob([content]); //构造一个blob对象来处理数据
            const fileName = "省内外统计表.xls";
            //对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
            //IE10以上支持blob但是依然不支持download
            if ("download" in document.createElement("a")) {
              //支持a标签download的浏览器
              const link = document.createElement("a"); //创建a标签
              link.download = fileName; //a标签添加属性
              link.style.display = "none";
              link.href = URL.createObjectURL(blob);
              document.body.appendChild(link);
              link.click(); //执行下载
              URL.revokeObjectURL(link.href); //释放url
              document.body.removeChild(link); //释放标签
            } else {
              //其他浏览器
              navigator.msSaveBlob(blob, fileName);
            }
          });
        })
        .catch(() => {
          Message({
            type: "info",
            message: "已取消导出",
          });
        });
    },

    // 表格数据获取
    getTabData() {
      this.$http
        .get("/trademark/report/province", {
          params: {
            type: Number(this.isProvince), // 省内报表0 省外报表1
            province: this.isProvince == 0 ? this.province : "", // 省份
            bgdate: this.bgdate, // 年头
            eddate: this.eddate, // 年尾
            pageSize: this.pageSize, // 页尺寸
            pageNum: this.currentPage, // 页码
          },
        })
        .then((res) => {
          if (res.data.code != 200)
            return this.$message.error(res.data.message);
          this.total = res.data.data.total; // 总页数
          let data = res.data.data.list;
          if (this.isProvince == 0) {
            this.tableData1 = data;
          } else if (this.isProvince == 1) {
            this.tableData2 = data;
          }
        })
        .catch((error) => {});
    },
  },
  created() {
    this.year = String(new Date().getFullYear());
    this.getCity();
    this.getTabData();
    this.changeTitle(); // 标题
  },
};
</script>
<style lang="less" scoped>
.table {
  .select-province {
    line-height: 40px;
    .select-text {
      width: 73px;
      margin-right: 15px;
      display: block;
      font-size: 14px;
      white-space: normal;
    }
  }
  .tabel-icon {
    font-size: 16px;
    margin-right: 8px;
  }
  .table-title {
    font-size: 28px;
    text-align: center;
    padding: 20px 0;
  }
  .table-content {
    width: 100%;
    font-size: 12px;
  }
  .el-button {
    margin-left: 30px;
  }
  .waiSearch {
    margin-left: 70px;
  }
  .textSheng {
    margin-left: 30px;
  }
  // 分页
  .pagination {
    text-align: center;
    margin: 30px 0;
  }
  .yearBtn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .el-table__row {
    padding: 10px 0;
  }
}
</style>

